<template>
  <el-container v-loading="loading">

    <el-row>
      <el-form label-width="100px" label-position="left" size="small">
        <el-form-item label="提现状态">
          <el-radio-group v-model="constraintForm.status" fill="#1AB394">
            <el-radio-button label="9">全部</el-radio-button>
            <el-radio-button label="0">审核中</el-radio-button>
            <el-radio-button label="1">通过</el-radio-button>
            <el-radio-button label="2">拒绝</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="时间">
          <el-radio-group v-model="constraintForm.timeType" fill="#1AB394" @change="getTimed">
            <el-radio-button label="1">不限</el-radio-button>
            <el-radio-button label="2">近一周</el-radio-button>
            <el-radio-button label="3">近一月</el-radio-button>
            <el-radio-button label="4">近三月</el-radio-button>
            <el-radio-button label="5">自定义</el-radio-button>
          </el-radio-group>

          <el-date-picker
            class="el-date-picker"
            v-model="constraintForm.time"
            type="datetimerange"
            value-format="timestamp"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            v-if="constraintForm.timeType == '5'">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="其他">
          <el-autocomplete
            v-model="constraintForm.text"
            :fetch-suggestions="querySearchAsync"
            placeholder="请选择配送人员"
            @select="handleSelect"
            clearable>
            <template slot-scope="{ item }">
              <div>{{ item.nickname }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="constraintSearchData">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleRefresh">
      </el-button>
    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="name"
        label="申请姓名"
        width="80">
      </el-table-column>

      <el-table-column
        prop="user.nickname"
        label="微信昵称">
      </el-table-column>

      <el-table-column
        prop="user.price"
        label="余额">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.user.price }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="money"
        label="申请金额">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.money }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="channel"
        label="提现类型"
        sortable>
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.channel==0">微信零钱</el-tag>
          <el-tag type="success" v-if="scope.row.channel==1">银行卡</el-tag>
          <el-tag type="success" v-if="scope.row.channel==2">支付宝</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="bcard_num"
        label="银行卡号">
      </el-table-column>

      <el-table-column
        prop="bank"
        label="开卡银行">
      </el-table-column>

      <el-table-column
        prop="alipay"
        label="支付宝号">
      </el-table-column>

      <el-table-column
        prop="create_time"
        label="申请时间"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-fw fa-clock-o"></i>
          <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="apply_time"
        label="审核时间"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-fw fa-clock-o"></i>
          <span style="margin-left: 10px">{{ scope.row.apply_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="交易状态"
        sortable
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==0">审核中</el-tag>
          <el-tag type="success" v-if="scope.row.status==1">通过</el-tag>
          <el-tag type="danger" v-if="scope.row.status==2">拒绝</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="fa fa-fw fa-check"
            size="mini"
            type="success"
            title="同意"
            @click="handleWithdrawAcceptItem(scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-remove"
            size="mini"
            type="danger"
            title="拒绝"
            @click="handleWithdrawRejectItem(scope.$index, scope.row)">
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      this.getData();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData: function () {
        let _this = this;
        this.api.getUserWithdrawTabulation({
          page: this.pagination.currentPage,
          paginate: this.pagination.pageSize,
          id: this.constraintForm.text != '' ? this.constraintForm.id : '',
          status: this.constraintForm.status,
          create_time: this.constraintForm.time.length > 0 ? this.constraintForm.time[0] + '-' + this.constraintForm.time[1] : 0
        }).then(function (res) {
          if (res.code == 1) {
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 同意申请
       * @param index
       * @param row
       */
      withdrawAccept({id: id}) {
        let _this = this;
        _this.api.userWithdrawAccept({id: id}).then(function (res) {
          if (res.code == 1) {
            _this.getData();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      },
      /**
       * 同意申请
       */
      handleWithdrawAcceptItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将同意该申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.withdrawAccept({id: _id});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 拒绝申请
       * @param index
       * @param row
       */
      handleWithdrawRejectItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将拒绝该申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.userWithdrawReject({id: _id}).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      /**
       * 数据刷新
       */
      handleRefresh: function () {
        this.getData();
        this.$message({
          showClose: true,
          message: '刷新成功',
          type: 'success'
        });
      },
      /**
       * 表格选中状态记录
       * @param val
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /**
       * 获取时间
       * @param type
       */
      getTimed: function () {
        const start = new Date();
        const end = new Date();
        let day = 0;
        if (this.constraintForm.timeType == '2') {
          day = 7;
        } else if (this.constraintForm.timeType == '3') {
          day = 30;
        } else if (this.constraintForm.timeType == '4') {
          day = 90;
        }
        if (this.constraintForm.timeType == '2' || this.constraintForm.timeType == '3' || this.constraintForm.timeType == '4') {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
          let timeArr = [];
          timeArr.push(start.getTime());
          timeArr.push(end.getTime());
          this.constraintForm.time = timeArr;
        } else if (this.constraintForm.timeType == '1' || this.constraintForm.timeType == '5') {
          this.constraintForm.time = [];
        }
      },
      /**
       * 条件数据检索
       */
      constraintSearchData: function () {
        this.getData();
        this.$message({
          showClose: true,
          message: '查询成功',
          type: 'success'
        });
      },
      /**
       * 远程数据加载
       */
      querySearchAsync(queryString, cb) {
        let _this = this;
        this.api.searchUserByUserName({name: queryString}).then(function (res) {
          if(res.code == '1'){
            cb(res.data.data);
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 搜索下拉选择
       * @param item
       */
      handleSelect(item) {
        this.constraintForm.text = item.nickname;
        this.constraintForm.id = item.id;
      },
    },
    data() {
      return {
        loading: true,  // 页面加载
        tableData: [
          {
            id:'',                //类型：Number  必有字段  备注：无
            uid:'',                //类型：Number  必有字段  备注：关联用户id
            money:'',                //类型：String  必有字段  备注：申请金额
            name:'',                //类型：String  必有字段  备注：申请姓名
            status:'',                //类型：Number  必有字段  备注：0，审核中；1，通过；2，拒绝
            channel:'',                //类型：Number  必有字段  备注：0，微信零钱；1，银行卡；2，支付宝
            bcard_num:'',                //类型：Number  必有字段  备注：银行卡号
            bank:'',                //类型：String  必有字段  备注：开卡银行
            alipay:'',                //类型：String  必有字段  备注：支付宝号
            create_time:'',                //类型：String  必有字段  备注：申请时间
            apply_time:'',                //类型：String  必有字段  备注：审核时间
            user:{                //类型：Object  必有字段  备注：关联用户
              id:'',                //类型：Number  必有字段  备注：id
              nickname:'',                //类型：String  必有字段  备注：微信昵称
              price:''                //类型：String  必有字段  备注：余额
            }
          },
        ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 100],
        },
        constraintForm: {
          status: '9',    // 0，审核中；1，通过；2，拒绝；默认9=>全部
          timeType: '1',   // 时间类型 1=>不限 2=>近一周 3=>近一月 4=>近三月 5=>自定义
          time: [],    // 时间戳，中横线分割‘-’,默认0
          text: '',    // 检索姓名，默认''
          id: '',    // 用户id，默认0
        }
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .el-date-picker {
    top: -3px;
    margin: 0 0 0 15px;
  }
</style>
